<template>
    <div class="echart">
        <div 
            v-if="option" 
            :id='id' 
            style="width:100%;height:100%"
        >
        </div>
        <div v-else class="empty">暂无数据</div>
    </div>
</template>
<script>
export default {
    props:{
        id:{
            type:String,
            required:true
        },
        option:{
            type:Object,
            required:true
        }
    },
    data(){
        return {
            
        }
    },
    mounted(){
        this.initData();
    },
    methods:{
        initData(){
           let echartsData=this.$echarts.init(document.getElementById(this.id));
            // let option={
            //     //标题
            //     title:{},
            //     //提示框组件
            //     tooptip:{},
            //     //图例
            //     legend:{},
            //     //工具栏
            //     toolbox:{},
            //     //横坐标
            //     xAxis:{},
            //     //纵坐标
            //     yAxis:{},
            //     //值域
            //     dataRange:{},
            //     series:[]
            // };
            echartsData.setOption(this.option);
        }
    }
}
</script>
<style lang="less" scoped>
.echart{
    width: 100%;
    height: 100%;
    .empty{
        text-align: center;
    }
}
</style>